<style type="text/css">
	.setFilter{	display:block;	}
	.unsetFilter{display:none;	}
	fieldset p.filter-comparative, #filter_pathology table{ margin-left:1em;margin-bottom:1em;}
	fieldset p.filter-comparative select,fieldset p.filter-comparative input,fieldset p.filter-comparative a { margin-left:1em;}
</style>
<div class="column1-unit">
	<h1 class="pagetitle">B&uacute;squeda de An&aacute;lisis</h1>
	<div id="search-filtering">
		<div class="filters-bar">
			<label for="cmbFilter">Filtros:</label>
			<select id="cmbFilter" name="cmbFilter">
				<option value="none" selected="selected">Seleccione...</option>
				<option value="aod">Amplitud Onda Diastólica</option> 
				<option value="aos">Ancho Onda Sistólica</option>
				<option value="age">Edad</option>
				<option value="date">Fecha</option>
				<!-- <option value="habit">H&aacute;bito</option> -->
				<option value="iar">Indice Aumentaci&oacute;n Radial</option>
				<option value="pathology">Patologia</option>
				<option value="diastolic">Presion Diastolica</option>
				<option value="systolic">Presion Sistolica</option>
				<option value="sex">Sexo</option>
			</select>
			&nbsp;
			<a class="add-filter" href="#">Agregar Filtro</a>
		</div>
		<div class="filters contactform" style="width:650px;">
			<form id="frmAdvancedSearch" action="searchanalysis/search">
			
				<div id="filter_aod" class="unsetFilter">
					<fieldset>
						<legend>Por Amplitud Onda Diast&oacute;lica:</legend>
						<p class="filter-comparative">
							<label for="cmbAODComparative">Amplitud:</label>
							<select id="cmbAODComparative" name="cmbAODComparative">
								<option value="more">mayor a</option>
								<option value="less">menor a</option>
								<option value="between">entre</option>
							</select>&nbsp;
							<input type="text" id="aod_val" name="aod_val" value="" />
							<span class="aod_between_fields" style="display:none;">
								<input type="text" id="aod_min_val" name="aod_min_val" value=""/>&nbsp;y&nbsp;
								<input type="text" id="aod_max_val" name="aod_max_val" value=""/>
							</span>&nbsp;[%]
							<a class="remove-filter" href="aod">Quitar</a>
						</p>
					</fieldset>	
				</div>
				
				<div id="filter_aos" class="unsetFilter">
					<fieldset>
						<legend>Por Ancho Onda Sist&oacute;lica:</legend>
						<p class="filter-comparative">
							<label for="cmbAOSComparative">Ancho:</label>
							<select id="cmbAOSComparative" name="cmbAOSComparative">
								<option value="more">mayor a</option>
								<option value="less">menor a</option>
								<option value="between">entre</option>
							</select>&nbsp;
							<input type="text" id="aos_val" name="aos_val" value="" />
							<span class="aos_between_fields" style="display:none;">
								<input type="text" id="aos_min_val" name="aos_min_val" value=""/>&nbsp;y&nbsp;
								<input type="text" id="aos_max_val" name="aos_max_val" value=""/>
							</span>&nbsp;[ms]
							<a class="remove-filter" href="aos">Quitar</a>
						</p>
					</fieldset>	
				</div>
				
				<div id="filter_age" class="unsetFilter">
					<fieldset>
						<legend>Por Edad:</legend>
						<p class="filter-comparative">
							<label for="cmbAGEComparative">Edad</label>
							<select id="cmbAGEComparative" name="cmbAGEComparative">
								<option value="more">mayor a</option>
								<option value="less">menor a</option>
								<option value="between">entre</option>
							</select>&nbsp;
							<input type="text" id="age_val" name="age_val" value="" />
							<span class="age_between_fields" style="display:none;">
								<input type="text" id="age_min_val" name="age_min_val" value=""/>&nbsp;y&nbsp;
								<input type="text" id="age_max_val" name="age_max_val" value=""/>
							</span>&nbsp;[a&ntilde;os]
							<a class="remove-filter" href="age">Quitar</a>
						</p>
						
					</fieldset>	
				</div>
				
				<div id="filter_date" class="unsetFilter">
					<fieldset>
						<legend>Por Fecha de An&aacute;lisis:</legend>
						<p class="filter-comparative">
							<label for="cmbDATEComparative">Fecha</label>
							<select id="cmbDATEComparative" name="cmbDATEComparative">
								<option value="more">posterior a</option>
								<option value="less">inferior a</option>
								<option value="between">entre</option>
							</select>&nbsp;
							<input type="text" id="date_val" name="date_val" value="" />
							<span class="date_between_fields" style="display:none;">
								<input type="text" id="date_min_val" name="date_min_val" value=""/>&nbsp;y&nbsp;
								<input type="text" id="date_max_val" name="date_max_val" value=""/>
							</span>
							<a class="remove-filter" href="date">Quitar</a>
						</p>
					</fieldset>
				</div>
				
				<div id="filter_habit" class="unsetFilter">
					<fieldset>
						<legend>Por H&aacute;bito:</legend>
						<label for="smoker">Fumador</label><input type="checkbox" id="chkSmoker" name="smoker" value="1" />
						<label for="sedentary">Sedentario</label><input type="checkbox" id="chkSedentary" name="sedentary" value="1"/>
						<a class="remove-filter" href="habit">Quitar</a>
					</fieldset>
				</div>
				
				<div id="filter_iar" class="unsetFilter">
					<fieldset>
						<legend>Por Indice de Aumentaci&oacute;n Radial:</legend>
						<p class="filter-comparative">
							<label for="cmbIARComparative">Aumentaci&oacute;n:</label>
							<select id="cmbIARComparative" name="cmbIARComparative">
								<option value="more">mayor a</option>
								<option value="less">menor a</option>
								<option value="between">entre</option>
							</select>&nbsp;
							<input type="text" id="iar_val" name="iar_val" value="" />
							<span class="iar_between_fields" style="display:none;">
								<input type="text" id="iar_min_val" name="iar_min_val" value=""/>&nbsp;y&nbsp;
								<input type="text" id="iar_max_val" name="iar_max_val" value=""/>
							</span>&nbsp;[%]
							<a class="remove-filter" href="iar">Quitar</a>
						</p>
					</fieldset>	
				</div>
				
				<div id="filter_pathology" class="unsetFilter"></div>
				
				<div id="filter_diastolic" class="unsetFilter">
					<fieldset>
						<legend>Por Presion Diastolica:</legend>
						<p class="filter-comparative">
							<label for="cmbPDComparative">Valor</label>
							<select id="cmbPDComparative" name="cmbPDComparative">
								<option value="more">mayor a</option>
								<option value="less">menor a</option>
								<option value="between">entre</option>
							</select>&nbsp;
							<input type="text" id="pd_val" name="pd_val" value="" />
							<span class="pd_between_fields" style="display:none;">
								<input type="text" id="pd_min_val" name="pd_min_val" value=""/>&nbsp;y&nbsp;
								<input type="text" id="pd_max_val" name="pd_max_val" value=""/>
							</span>&nbsp;[mmHG]
							<a class="remove-filter" href="diastolic">Quitar</a>
						</p>
						
					</fieldset>
				</div>
				
				<div id="filter_systolic" class="unsetFilter">
					<fieldset>
						<legend>Por Presion sistolica:</legend>
						<p class="filter-comparative">
							<label for="cmbPSComparative">Valor</label>
							<select id="cmbPSComparative" name="cmbPSComparative">
								<option value="more">mayor a</option>
								<option value="less">menor a</option>
								<option value="between">entre</option>
							</select>&nbsp;
							<input type="text" id="ps_val" name="ps_val" value="" />
							<span class="ps_between_fields" style="display:none;">
								<input type="text" id="ps_min_val" name="ps_min_val" value=""/>&nbsp;y&nbsp;
								<input type="text" id="ps_max_val" name="ps_max_val" value=""/>
							</span>&nbsp;[mmHG]
							<a class="remove-filter" href="systolic">Quitar</a>
						</p>
					</fieldset>
				</div>
				
				<div id="filter_sex" class="unsetFilter">
					<fieldset>
						<legend>Por Genero:</legend>
						<p class="filter-comparative">
							<label for="cmbSex">Genero</label>
							<select id="cmbSex" name="cmbSex">
								<option value="male">Masculino</option>
								<option value="female">Femenino</option>
							</select>
							<a class="remove-filter" href="sex">Quitar</a>
						</p>
						
					</fieldset>
				</div>
				
				<input type="button" class="button" style="margin-top:0.5em;" id="btnAdvancedSearch" name="btnAdvancedSearch" value="Buscar"></input>
			</form>
		</div>
	</div>
	<div id="search-results"></div>
</div>
<script type="text/javascript" src="media/js/js_controls/js_date.js"></script>
<script type="text/javascript">

	var FilterSearch = (function(){

		return {
			init : function(){
				var that = this;
				$j("a.add-filter").click(function(){
					//console.log($j("#cmbFilter option:selected").text());
					var filter = $j("#cmbFilter option:selected").val();
					that.showFilter(filter);
					return false;
				});
				$j("a.remove-filter").click(function(){
					var filter = $j(this).attr("href");
					that.hideFilter(filter);
					return false;	
				});

				//Inicializo los combo box
				this.registerComboBox("#cmbAODComparative","#aod_val","span.aod_between_fields");
				this.registerComboBox("#cmbAOSComparative","#aos_val","span.aos_between_fields");
				this.registerComboBox("#cmbAGEComparative","#age_val","span.age_between_fields");
				this.registerComboBox("#cmbDATEComparative","#date_val","span.date_between_fields");
				this.registerComboBox("#cmbIARComparative","#iar_val","span.iar_between_fields");
				this.registerComboBox("#cmbPDComparative","#pd_val","span.pd_between_fields");
				this.registerComboBox("#cmbPSComparative","#ps_val","span.ps_between_fields");

				//Inicializo los datepicker				
				this.registerDatePicker('#date_val');
				this.registerDatePicker('#date_min_val');
				this.registerDatePicker('#date_max_val');
				
				$j("#btnAdvancedSearch").click(function(){ that.search(); });
			},
			buildPathologiesFilter : function(){
				var that = this;
				$j("div#filter_pathology").load("searchanalysis/filterpathologies",{},function(){
					var oThat = that;
					$j("div#filter_pathology a.remove-filter").click(function(){ oThat.hideFilter($j(this).attr("href")); return false;});
					return false;	
				});
			},
			getSelectedPathologies : function(){
				var pathologies = [];
                $j("#selected_pathologies option").each(function(index){
                    pathologies.push($j(this).attr("value")); 
                });
                return pathologies;
			},
			hideFilter : function(filter){
				$j("div#filter_" + filter).removeClass("setFilter");
				$j("div#filter_" + filter).addClass("unsetFilter");
				$j("div#filter_"+filter).hide();
				$j('#cmbFilter option[value="' + filter + '"]').show();
			},
			newSearch : function(){
				$j("#search-results").hide();
				$j("#search-filtering").show();
			},
			registerDatePicker : function(target){
				return DateControl.createDatePicker(target,'01-01-2011','Regressive');
			},
			registerComboBox: function (cmbComparativeID, singleFieldID, doubleFieldID){
				var that = this;
				$j(cmbComparativeID).change(function(){
					that.toggleInputField($j(cmbComparativeID + " option:selected").val(),singleFieldID,doubleFieldID);
					return false;
				});
			},
			showFilter : function(filter){
				if (filter == "none") return alert("Seleccione un filtro por favor");
				$j("div#filter_" + filter).removeClass("unsetFilter");
				$j("div#filter_" + filter).addClass("setFilter");
				$j("div#filter_" + filter).show();
				$j('#cmbFilter option[value="' + filter + '"]').hide();
				$j('#cmbFilter option[value="none"]').attr("selected","selected");
				if (filter == "pathology"){	this.buildPathologiesFilter();} 
			},
			search : function(){
				var url = $j("#frmAdvancedSearch").attr("action");
                var data = $j("#frmAdvancedSearch div.setFilter :input").serializeArray();
                var json = {};
		        jQuery.map(data, function(n, i){
                        json[n['name']] = n['value'];
                });

                var pathologies = this.getSelectedPathologies();
				if (pathologies.length > 0){
					json["pathologies"] = pathologies;
				}
                

                $j.post(url,json,function(response){
                    console.log(response);
                    $j("#search-filtering").hide();
                    $j("#search-results").html(response).show();
                    return false;
            	});
			},
			toggleInputField : function(cmbValue, singleFieldID, doubleFieldID){
				if (cmbValue == "between"){
					$j(doubleFieldID).show();
					$j(singleFieldID).hide();
				}else{
					$j(doubleFieldID).hide();
					$j(singleFieldID).show();
				}
			}	
		};
	}());
	$j(document).ready(function(){ FilterSearch.init(); });
</script>